<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加角色</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
<link rel="stylesheet" href="__PUBLIC__/admin/css/admin.css">
</head>
<body class="layui-bg-gray">
	<div class="layui-fluid">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md12 layui-col-xs12">
				<div class="layui-card">
					<div class="layui-card-body">
						<form class="layui-form" action="">
							<div class="layui-form-item">
								<label class="layui-form-label">授权权限组</label>
								<div class="layui-input-inline">
									<select id="privilege_id" name="privilege_id"
										lay-filter="privileges">
										<option value="0">请选择权限组</option>
										<volist name="privileges" id="val">
										<option value="{$val.id}">{$val.privilege_name}</option>
										</volist>
									</select>
								</div>
							</div>
							<div id="privilege" class="layui-hide"
								style="width: 400px; border: 1px dashed #eee; padding: 10px 0 25px 5px;"></div>
							<div class="layui-form-item"
								style="margin-top: 10px; text-align: right">
								<div class="layui-input-block">
									<button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="__PUBLIC__/layui/layui.js"></script>
	<script src="__PUBLIC__/layui/layui-xtree.js"></script>
	<script type="text/javascript"
		src="__PUBLIC__/common/js/jquery-2.0.3.min.js"></script>
	<script type="text/javascript">
		var nid = {$nid};
		var privilege_id = {$privilege.privilege_id};
		$(function() {
			layui.use('form', function() {
				var form = layui.form;
				form.on('select(privileges)',
						function(data) {
							var val = data.value;
							if (val == 0) {
								!$("#privilege").hasClass('layui-hide') ? $(
										"#privilege").addClass('layui-hide')
										: '';
							} else {
								$("#privilege").hasClass('layui-hide') ? $(
										"#privilege").removeClass('layui-hide')
										: '';
										$.ajax({
											type :  "POST",
											url : "{:U('Limits/rolePrivilege')}",
											data : {
												nid : nid,
												privilege_id : val,
												type : 'privilege'
											},
											success: function(res) {
												var menusTree = new layuiXtree({
													elem : 'privilege',
													form : form,
													isopen : true,
													data : res
												});
											}
										});
							}
						});
				form.on('submit(formDemo)', function(data) {
					var privilege_id = data.field.privilege_id;
					if(privilege_id == 0) {
						layer.msg('请选择权限组');
						return false;
					}
					var index = layer.load(3);
					$.ajax({
						type : "POST",
						url : "{:U('Limits/rolePrivilege')}",
						data : {
							nid : nid,
							privilege_id : privilege_id
						},
						success : function(res) {
							layer.close(index);
							if (res.status == 1) {
								layer.msg(res.info);
								layui.data('cache', {
									key : 'status',
									value : true
								});
							} else {
								layer.msg(res.info);
							}
						}
					});
					return false;
				});
				$('#privilege_id').val(privilege_id);
				selectPrivilege(privilege_id, form);
				form.render('select');
			});
		});
		function selectPrivilege(val, form) {
			if(privilege_id == 0) {
				!$("#privilege").hasClass('layui-hide') ? $(
				"#privilege").addClass('layui-hide')
				: '';
				return false;
			} else {
				$("#privilege").hasClass('layui-hide') ? $(
				"#privilege").removeClass('layui-hide')
				: '';
				$.ajax({
					type :  "POST",
					url : "{:U('Limits/rolePrivilege')}",
					data : {
						nid : nid,
						privilege_id : val,
						type : 'privilege'
					},
					success: function(res) {
						var menusTree = new layuiXtree({
							elem : 'privilege',
							form : form,
							isopen : true,
							data : res
						});
					}
				});
			}
		}
	</script>
</body>
</html>